<script setup>
import { ref, computed, toRaw, nextTick, toRefs } from "vue";
import BaseInfo from "./BaseInfo";
import SelectInfo from "./SelectInfo";
import DetailInfo from "./DetailInfo";
import { useAllCommunityList } from "@/hooks/index.js";
import { addTicketApi, editTicketApi, getTicketApi } from "@/api/ticket.js";
import { ElMessage } from "element-plus";

const communityList = useAllCommunityList();

const defaultData = () => ({
  anonymous: 1, //匿名状态
  community_code: "", // 小区编码
  description: "", // 富文本内容
  end_time: "",
  img_url: "",
  multi: 1, // 支持多选
  options: [], // 选项列表
  remark: "", // 备注
  start_time: "",
  status: 1, // 状态
  title: "", // 标题
});

const formData = ref(defaultData());

const optionsVaild = (rule, value, callback) => {
  try {
    value.forEach((item) => {
      if (!item.name || !item.description) {
        callback(new Error("请输入"));
      }
    });
  } catch (error) {
    console.log(error);
  }
  callback();
};

const formRules = {
  community_code: [
    { required: true, message: "请选择小区", trigger: "change" },
  ],
  title: [{ required: true, message: "请输入投票标题", trigger: "blur" }],
  start_time: [
    { required: true, message: "请选择开始时间", trigger: "change" },
  ],
  end_time: [{ required: true, message: "请选择结束时间", trigger: "change" }],
  description: [{ required: true, message: "请输入内容", trigger: "blur" }],
  options: [
    { required: true, message: "选项不能为空", trigger: "change" },
    { validator: optionsVaild, trigger: "change" },
  ],
};

const activeName = ref("first");
const isShow = ref(false);
const title = computed(() => {
  return formData.value.id ? "修改投票信息" : "新增投票信息";
});

// 关闭
const formRef = ref();
const closeDrawer = async () => {
  formRef.value.clearValidate();
  await nextTick();
  formData.value = defaultData();
  detailRef.value.clearQuill(); // 清空富文本
  isShow.value = false;
};

// 提交
const detailRef = ref();
const selectRef = ref();
const onSubmit = async () => {
  try {
    await formRef.value.validate();
    await detailRef.value.validateQuill();
    formData.value.start_time = +new Date(formData.value.start_time);
    formData.value.end_time = +new Date(formData.value.end_time);
    formData.value.id
      ? await editTicketApi(toRaw(formData.value))
      : await addTicketApi(toRaw(formData.value));
    ElMessage.success(formData.value.id ? "修改成功" : "添加成功");
    emit("updateList");
    closeDrawer();
  } catch (error) {
    console.log(error);
  }
};

// 回显
const replyData = async (id) => {
  const res = await getTicketApi(id);
  formData.value = res.data;
  isShow.value = true;
};

const emit = defineEmits(["updateList"]);

defineExpose({
  isShow,
  replyData,
});
</script>
<template>
  <el-drawer
    :title="title"
    v-model="isShow"
    direction="rtl"
    size="45%"
    :before-close="closeDrawer"
    destroy-on-close
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-position="top"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础信息" name="first">
          <BaseInfo
            :formData="formData"
            :communityList="communityList"
          ></BaseInfo>
        </el-tab-pane>
        <el-tab-pane label="选项信息" name="second">
          <el-form-item prop="options">
            <SelectInfo
              :formData="formData"
              :formRules="formRules"
              ref="selectRef"
            ></SelectInfo>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="详细信息" name="third">
          <DetailInfo :formData="formData" ref="detailRef"></DetailInfo>
        </el-tab-pane>
      </el-tabs>
      <!-- <el-form-item>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <el-button type="primary" @click="onSubmit">确定</el-button>
      <el-button @click="closeDrawer">取消</el-button>
    </template>
  </el-drawer>
</template>

<style lang="scss" scoped></style>
